<template>
  <div>
    <div>
      <a-button class="frebtn" @click="backClient">返回客户列表</a-button>
    </div>
    <div class="top">
      <div id="components-form-demo-advanced-search">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="6">
            <div class="label">币种选择：</div>
            <a-select
              style="width: 70%"
              show-search
              option-filter-prop="children"
              v-model="searchData.billCurrency"
              allowClear
     
              placeholder="全部币种"
            >
              <a-select-option
                :name="item.exchangeCurrency"
                :value="item.exchangeCurrency"
                v-for="item in settlementCurrencys"
                :key="item.sysCurrencyId"
              >
                {{ item.exchangeCurrency }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="18">
            <div class="label">账单选择：</div>
            <a-select
              show-search
              style="width: 20%"
              option-filter-prop="children"
              :filter-option="filterOption"
              v-model="searchData.isSystem"
              allowClear
              @change="chooseBill"
              placeholder="所有账单"
            >
              <a-select-option
                :value="item.value"
                v-for="item in billArr"
                :key="item.label"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-select
              v-if="billFlag"
              show-search
              style="width: 20%; margin: 0 10px"
              option-filter-prop="children"
              :filter-option="filterOption"
              v-model="searchData.value"
              allowClear
              placeholder="全部"
            >
              <a-select-option
                :value="item.value"
                v-for="item in bills"
                :key="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-button
              type="primary"
              style="margin: 0 10px"
              class="top-btn"
              @click="searchBtn"
            >
              查询
            </a-button>
            <a-button type="primary" class="top-btn" @click="resetBtn">
              重置
            </a-button>
          </a-col>
        </a-row>
      </div>
    </div>

    <a-spin tip="Loading..." :spinning="spinning">
      <a-table :data-source="tableData" :pagination="false">
        <!-- 账期 -->
        <a-table-column
          key="billTitle"
          data-index="billTitle"
          width="12%"
          align="center"
        >
          <span slot="title">账期</span>
          <template slot-scope="text, record">
            {{ record.billTitle }}
          </template>
        </a-table-column>
        <!-- 账单币种 -->
        <a-table-column
          width="6%"
          key="billCurrency"
          data-index="billCurrency"
          align="center"
        >
          <span slot="title">账单币种</span>
          <template slot-scope="text, record">
            {{ record.billCurrency }}
          </template>
        </a-table-column>
        <!-- 运费 -->
        <a-table-column
          width="9%"
          key="freightMoney"
          data-index="freightMoney"
          align="center"
        >
          <span slot="title">运费</span>
          <template slot-scope="text, record">
            <span>{{ record.freightMoney }}</span>
          </template>
        </a-table-column>
        <!-- 处理费 -->
        <a-table-column
          key="handleMoney"
          width="8%"
          data-index="handleMoney"
          align="center"
        >
          <span slot="title">处理费</span>
          <template slot-scope="text, record">
            <span>{{ record.handleMoney }}</span>
          </template>
        </a-table-column>

        <!-- 代发仓租 -->
        <a-table-column
          key="oneSendRentMoney"
          data-index="oneSendRentMoney"
          align="center"
          width="8%"
        >
          <span slot="title">代发仓租</span>
          <template slot-scope="text, record">
            <span>{{ record.oneSendRentMoney }}</span>
          </template>
        </a-table-column>
        <!-- 退件仓租 -->
        <a-table-column
          width="8%"
          key="returnPartsRentMoney"
          data-index="returnPartsRentMoney"
          align="center"
        >
          <span slot="title">退件仓租</span>
          <template slot-scope="text, record">
            <span>{{ record.returnPartsRentMoney }}</span>
          </template>
        </a-table-column>
        <!-- 转运仓租 -->
        <a-table-column
          key="transportRentMoney"
          width="8%"
          data-index="transportRentMoney"
          align="center"
        >
          <span slot="title">转运仓租</span>
          <template slot-scope="text, record">
            <span>{{ record.transportRentMoney }}</span>
          </template>
        </a-table-column>
        <!-- 其他费用 -->
        <a-table-column
          width="8%"
          key="otherMoney"
          data-index="otherMoney"
          align="center"
        >
          <span slot="title">其他费用</span>
          <template slot-scope="text, record">
            <span>{{ record.otherMoney }}</span>
          </template>
        </a-table-column>
        <!-- 本期总支出  -->
        <a-table-column
          key="expenditureMoney"
          data-index="expenditureMoney"
          width="9%"
          align="center"
        >
          <span slot="title">本期总支出</span>
          <template slot-scope="text, record">
            <span>{{ record.expenditureMoney }}</span>
          </template>
        </a-table-column>
        <!-- 本期总入账  -->
        <a-table-column
          key="entryMoney"
          data-index="entryMoney"
          width="9%"
          align="center"
        >
          <span slot="title">本期总入账</span>
          <template slot-scope="text, record">
            <span>{{ record.entryMoney }}</span>
          </template>
        </a-table-column>

        <!-- 操作 -->
        <a-table-column align="center" width="15%">
          <span slot="title">操作</span>
          <span class="action" slot-scope="text, record">
            <a
              href="javascript:;"
              @click="showModal(record)"
              style="color: #0000bf; border-bottom: 1px solid #0000bf"
              >查看账单</a
            >
            <a
              href="javascript:;"
              @click="exportExcel(record)"
              style="
                color: #0000bf;
                border-bottom: 1px solid #0000bf;
                margin-left: 10px;
              "
            >
              导出帐单
            </a>
          </span>
        </a-table-column>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <LookBillModal />
  </div>
</template>

<script>
import LookBillModal from "./LookBillModal";
import { logi_getCurrency } from "@/apis/system/setManage/setWarehouse";
import req from "@/utils/req";
import {
  clientBill_tabList,
  clientBill_selectBill,
  clientBill_exportList,
} from "@/apis/system/FinanceManagement/clientBill";
export default {
  props: ["parentData"],
  components: {
    LookBillModal,
  },
  data() {
    return {
      billFlag: false,
      billArr: [
        { value: 0, label: "所有账单" },
        { value: 1, label: "系统月账单" },
      ],
      bills: [],
      settlementCurrencys: [],
      spinning: false,
      dateTime: [],
      tableData: [],
      total: 5,
      searchData: {
        value: null,
        current: 1,
        size: 10,
        billCurrency: "全部币种",
        isSystem: 0,
      },
    };
  },
  mounted() {
    this.getCBillTableList(this.parentData.tenantId);
    this.getCurrency();
  },
  methods: {
    //导出账单
    async exportExcel(record) {
      record.startTimeValue = `${record.periodStartTime} 00:00:00`;
      record.endTimeValue = `${record.periodEndTime} 23:59:59`;
      let res = await clientBill_exportList(record.tenantId, record);
      if (res) {
        req.exportFile(
          `${
            record.billTitleC +
            "-" +
            record.billCurrency +
            "-" +
            record.tenantId +
            "-" +
            this.parentData.nickName
          }`,
          res
        );
      }
    },
    showModal(record) {
      setTimeout(() => {
        this.$bus.$emit("showModal", record);
      }, 50);
    },
    //获取账单下拉
    async getBillselect(tenantId) {
      let res = await clientBill_selectBill(tenantId);
      if (res.code == "200") {
        this.bills = res.responseBody;
        if (this.bills.length != 0) {
          this.searchData.value = this.bills[0].value;
          this.billFlag = true;
        }
      }
    },
    //获取币种的接口
    async getCurrency() {
      let res = await logi_getCurrency({ size: 100000, current: 1 });
      if (res.code == "200") {
        this.settlementCurrencys = res.responseBody.records;
        this.settlementCurrencys.unshift({
          exchangeCurrency: "全部币种",
          sysCurrencyId: -1,
        });
      }
    },
    //选择账单
    chooseBill(value) {
      if (value == "0") {
        this.billFlag = false;
      } else {
        this.getBillselect(this.parentData.tenantId);
      }
    },
    //导入按钮
    importBill() {},
    //查询接口
    searchBtn() {
      this.getCBillTableList(this.parentData.tenantId);
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getCBillTableList(this.parentData.tenantId);
    },
    //页码变更
    showChange(current, size) {
      this.searchData.current = current;
      this.searchData.size = size;
      this.getCBillTableList(this.parentData.tenantId);
    },
    //重置按钮
    resetBtn() {
      this.billFlag = false;
      this.searchData.value = null;
      this.searchData.billCurrency = "全部币种";
      this.searchData.isSystem = 0;
      this.getCBillTableList(this.parentData.tenantId);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 获取表格数据
    async getCBillTableList(tenantId) {
      this.spinning = true;
      let { code, responseBody } = await clientBill_tabList(
        tenantId,
        this.searchData
      );
      if (code === "200") {
        this.total = responseBody.total * 1;
        this.tableData = responseBody.records;
        this.spinning = false;
      }
    },
    backClient() {
      setTimeout(() => {
        this.$emit("backClient");
      }, 50);
    },
  },
};
</script>

<style lang="less" scoped>
.remarks-item {
  display: flex;
  align-items: center;
  .ant-input {
    margin-right: 5px;
    height: 30px;
  }
}
.action {
  span {
    margin: 0 5px 0 0;
  }
}
#components-form-demo-advanced-search {
  padding: 5px;
  input {
    width: 60%;
  }
  .ant-col {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      text-align: right;
    }
  }
}
.top-btn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.top-btn:hover {
  background: #3eae7c;
  color: #fff;
}
.frebtn {
  background-color: #66b1ff;
  color: #fff;
  border: #66b1ff;
}
.frebtn:hover {
  background-color: #66b1ff;
  color: #fff;
  border: #66b1ff;
}
</style>
